<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form style="padding-top: 20px" :model="formModel" :hideRequiredMark="true" :label-col="labelCol">
        <a-row>
          <a-col :span="10" :lg="10" :xs="24" :md="24">
            <a-form-item label="审核状态">
              <a-row style="align-items: center">
                <a-col
                  :span="5"
                  v-for="(item, index) in statusList"
                  :offset="index == 0 ? 1 : ''"
                  :class="index == statusAct ? 'act-font-color' : ''"
                  @click="chooseStatus(item.status, index)"
                  :key="item.status"
                  >{{ item.title }}</a-col
                >
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="9" :md="8">
            <a-form-item>
              <a-range-picker
                v-model:value="time"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY/MM/DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="7" :md="7">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="formModel.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="2" :offset="1"><a-button type="primary" @click="buttonSearch" class="d-a-center">搜索</a-button></a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540,x:'auto' }" -->

      <template #status="{ record }">
        <a-tag :color="statusColor[record.status]">{{ orderListStatus[record.status] }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="link" @click="look(record.number, record.id)">查看</a-button>
        <a-button type="link" @click="deal(record.number, record.id)" v-if="record.status == 14">审核</a-button>
      </template>
    </a-table>

    <!-- 护理报告 -->
    <template v-if="nurseReportVisible">
      <report :isShowClose="false" :isAudit="isEdit" :visible="nurseReportVisible" :number="number" :id="id" @closeModal="closeModal">
        <template v-slot:audit>
          <a-divider></a-divider>
          <a-row v-if="isEdit == 1">
            <a-col :span="4" :offset="8">
              <a-button type="danger" @click="reject" class="d-a-center">拒绝</a-button>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-button type="primary" @click="pass" class="d-a-center">通过</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="2" :offset="12" v-if="isEdit == 0">
              <a-button type="info" @click="closeModal" class="d-a-center">关闭</a-button>
            </a-col>
          </a-row>
        </template>
      </report>
    </template>

    <!-- 拒绝审核-->
    <a-modal
      :destroyOnClose="true"
      v-model:visible="rejectVisible"
      title="原因填写"
      @ok="handleOk1"
      @cancel="handleCancel"
      ok-text="提交"
      :closable="true"
    >
      <a-form ref="reasonRef" :model="reasonForm" :rules="rules">
        <a-form-item label="主述" name="value">
          <a-textarea v-model:value="reasonForm.value"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, orderListStatusObj, statusListArr, dataObj, statusColorObj } from './data'
import report from './components/report.vue'
import { selectOrganOrderList, updateOrganOrder } from '@/api/buisness/index'
import { useTable, useModal } from '@/hooks'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    report
  },
  setup() {
    const reasonRef = ref('')
    // 状态列表
    const statusList = statusListArr

    const statusColor = statusColorObj

    const columns = columnsArr

    const orderListStatus = orderListStatusObj

    const data = reactive(dataObj)

    // 选择时间
    const panelChange = (date, dateString) => {
      formModel.value.startTime = dateString[0]
      formModel.value.endTime = dateString[1]
    }

    //必须有括号 建议箭头函数 防止深拷贝
    const getParams = () => ({})

    const { renderData, formModel, loading, pagination, handleSearch, handleTableChange, buttonSearch } = useTable({
      api: selectOrganOrderList,
      getParams
    })

    handleSearch(1)

    // 关闭护理报告弹窗
    const closeModal = () => {
      data.nurseReportVisible = false
    }

    const chooseStatus = (status, index) => {
      if (data.statusAct == index) return
      data.statusAct = index
      formModel.value.status = status
      if (index == 0) {
        delete formModel.value['status']
      } else {
        formModel.value.status = status
      }
      handleSearch(1)
    }
    const handleOk = e => {
      data.visible = false
    }
    const handleOk1 = e => {
      let obj = {
        status: 6,
        number: data.number,
        cancelCause: data.reasonForm.value
      }
      reasonRef.value
        .validate()
        .then(async () => {
          let res = await updateOrganOrder(obj)
          if (res.success) {
            // data.nurseReportVisible = false;
            data.reasonForm.value = ''
            data.rejectVisible = false
            notification.success({
              message: '执行成功',
              duration: 1
            })
            handleSearch()
            closeModal()
          }
        })
        .catch(error => {})
    }
    // 拒绝审核
    const reject = () => {
      data.rejectVisible = true
    }
    // 拒绝审核
    // const reject = () => {
    //   const {closeModal} = useModal.confirm({
    //     title: '确认拒绝此渠道预约单吗？',
    //     icon: createVNode(ExclamationCircleOutlined),
    //     okText: '确定',
    //     cancelText: '取消',
    //     onOk: async () => {
    //       let obj = {
    //         status: 6,
    //         number: data.number
    //       }

    //       let res = await updateOrganOrder(obj)
    //       if (res.success) {
    //         data.nurseReportVisible = false
    //         data.rejectVisible = false
    //         notification.success({
    //           message: '执行成功',
    //           duration: 1
    //         })
    //         handleSearch(1)
    //         closeModal()
    //       }
    //     },
    //   })
    // }
    const handleCancel = () => {
      data.reasonForm.value = ''
      data.rejectVisible = false
    }
    const pass = () => {
      const { closeModal } = useModal.confirm({
        title: '确认通过此渠道预约单吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          let obj = {
            status: 15,
            number: data.number
          }

          let res = await updateOrganOrder(obj)
          if (res.success) {
            data.nurseReportVisible = false
            data.rejectVisible = false
            notification.success({
              message: '执行成功',
              duration: 1
            })
            handleSearch()
            closeModal()
          }
        }
      })
    }
    // 查看
    const look = (number, id) => {
      data.isEdit = 0
      data.number = number
      data.id = id
      data.nurseReportVisible = true
    }

    // 审核
    const deal = (number, id) => {
      data.isEdit = 1
      data.number = number
      data.id = id
      data.nurseReportVisible = true
    }

    return {
      ...toRefs(data),
      columns,
      statusList,
      orderListStatus,
      statusColor,
      renderData,
      formModel,
      loading,
      pagination,
      handleSearch,
      handleTableChange,
      buttonSearch,
      deal,
      look,
      panelChange,
      chooseStatus,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      closeModal,
      handleOk,
      reject,
      pass,
      handleOk1,
      handleCancel,
      reasonRef
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
